<!--
 * @Date: 2023-02-09 16:58:23
 * @LastEditTime: 2023-02-23 11:51:57
 * @FilePath: /hash-guess-game/src/views/gameRule/gameRule.vue
 * 介绍:赛级规则
-->
<script lang="ts" setup>
import gameRule from "./gameRule";
import { GameRule, apiGameRule } from "@@/api/module/sys";
import { pickBy } from "lodash";

const gameRuleList = reactive(getGameRuleList(gameRule));

async function getGameRule() {
  const res = await apiGameRule();
  if (!res) return;
  gameRuleList.length = 0;
  gameRuleList.push(...getGameRuleList(res));
}
getGameRule();

/**过滤接口数据为规则列表 */
function getGameRuleList(gameRule: any) {
  return Object.keys(pickBy(gameRule, (val) => typeof val === "object")).map(
    (val) => {
      const obj: GameRule.ResItem = gameRule[val];
      return {
        LV: val,
        ...obj,
      };
    }
  );
}
</script>

<template>
  <div class="gameRule auto-mt">
    <h3>HASH GAME</h3>
    <h4>{{ $t('sai-ji-gui-ze') }}</h4>
    <div class="T-A-C">{{ $t('ji-cha-zhi') }}</div>
    <Mtable>
      <Mtr>
        <Mth>{{ $t('deng-ji') }}</Mth>
        <Mth>{{ $t('ju-le-bu-liu-shui') }}</Mth>
        <Mth>{{ $t('jiang-jin-bi') }}</Mth>
      </Mtr>
      <Mtr v-for="role in gameRuleList" :key="role.LV">
        <Mtd>{{ role.LV }}</Mtd>
        <Mtd>{{ role.max }}</Mtd>
        <Mtd>{{ role.bili }}%</Mtd>
      </Mtr>
    </Mtable>
  </div>
</template>

<style lang="less" scoped>
h3,
h4,
.T-A-C {
  text-align: center;
}
</style>
